<template>
  <div id='app'>
    <div class="header">
<el-tabs v-model="activeName" >
    <el-tab-pane :label="'未读消息'+num0" name="0">
      
    </el-tab-pane>
    <el-tab-pane  :label="'已读消息'+num1" name="1"></el-tab-pane>
    <el-tab-pane  :label="'回收站'+num2" name="2"></el-tab-pane>
  </el-tabs>
<ul>
<li v-for="(c,i) in list" :key="i" v-show="c.num==activeName">
  <div>
<span>{{c.id}}</span>
        <span>{{c.content}}</span>
  </div>
  <div v-show="c.num==0">
<el-button type="primary" @click="MarkAsRead(i)">标为已读</el-button>
  </div>

  <div v-show="c.num==1">
      <el-button type="warning" @click="MarkUnread(i)">标记未读</el-button>
        <el-button type="danger" @click="remove(i)">删除</el-button>
  </div>

  <div v-show="c.num==2">
        <el-button type="danger" @click="restore(i)">还原</el-button>
  </div>
        
      </li>
</ul>
  <el-button @click="all">全部</el-button>
    </div>

   

  
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: '0',
      list: [{
            id: '1',
            content: '圣诞的钟声敲响,鹿儿的蹄声回荡,温暖的歌声送上,圣诞来到.',
            num: 0
        }, {
            id: '2',
            content: '愿你:"圣"下快乐,"圣"下健康,"圣"下吉祥。问君能有几多喜?',
            num: 0
        }, {
            id: '3',
            content: '圣诞钟声还尚早,祝福知多少?短信发出刚不久,又有祝福铃声在叨扰',
            num: 0
        }, {
            id: '4',
            content: '圣诞到,鹿儿跑,铃儿响叮当;雪花飘,鸟儿叫,树儿尽妖娆;',
            num: 1
        }, {
            id: '5',
            content: '幸福的时光就让它凝聚,祝平安快乐幸福如意!',
            num: 1
        }, {
            id: '6',
            content: '寒冷忘却遥望月光的思念,清翠的松柏身裹银色的衣,微风摇摆吹落点点思念。',
            num: 1
        }, {
            id: '7',
            content: '星星许下二个心愿;一是愿天下所有人平安快乐,另一个则是告诉正在看此讯息嘀幸运娃',
            num: 2
        }, {
            id: '8',
            content: '健康的体魄是树根,幸福的家庭是树干,顺心的事业是树枝,美满的爱情是树叶,辉煌的成就是树冠,惬意的生活是树荫!',
            num: 2
        }, {
            id: '9',
            content: '朋友久别情不断,圣诞问候爱更甜,平安狂欢,尽情欢,切莫把爱藏起来。',
            num: 2
        }]
    }
  },
  methods: {
    MarkAsRead(i){
      this.list[i].num=1

    },
    MarkUnread(i){
      this.list[i].num=0

    },
    remove(i){
      this.list[i].num=2

    },
    restore(i){
      this.list[i].num=1

    },
    all(){
      if(this.activeName==0){
        this.list.forEach(res=>{
          if(res.num==0){
     res.num=1
          }
     
        })
      }

       if(this.activeName==1){
        this.list.forEach(res=>{
          if(res.num==1){
     res.num=2
          }
     
        })
      }

       if(this.activeName==2){
        this.list.forEach(res=>{
          if(res.num==2){
     res.num=1
          }
     
        })
      }

    }

  },
  mounted() {

  },
  components: {

  },
  computed: {
    num0(){
      var num=0
      this.list.map(res=>{
        if(res.num==0){
          num++
        }
      })
      return num
    },
     num1(){
      var num=0
      this.list.map(res=>{
        if(res.num==1){
          num++
        }
      })
      return num
    },
     num2(){
      var num=0
      this.list.map(res=>{
        if(res.num==2){
          num++
        }
      })
      return num
    }
  },
}
</script>

<style lang='scss'>
.header{
  width: 1000px;
  margin: 0 auto;
  li{
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
}

</style>
